*/
mw.rcfilters.ui.CapsuleItemWidget = function MwRcfiltersUiCapsuleItemWidget( controller, model, config ) {
var $popupContent = $( '<div>' )
- .addClass( 'mw-rcfilters-ui-capsuleItemWidget-popup' ),
+ .addClass( 'mw-rcfilters-ui-capsuleItemWidget-popup-content' ),
descLabelWidget = new OO.ui.LabelWidget();
// Configuration initialization
this.model = model;
this.$overlay = config.$overlay || this.$element;
this.positioned = false;
+ this.popupTimeoutShow = null;
+ this.popupTimeoutHide = null;
// Parent constructor
mw.rcfilters.ui.CapsuleItemWidget.parent.call( this, $.extend( {
// Mixin constructors
OO.ui.mixin.PopupElement.call( this, $.extend( {
popup: {
- padded: true,
+ padded: false,
align: 'center',
$content: $popupContent
.append( descLabelWidget.$element ),
- $floatableContainer: this.$element
+ $floatableContainer: this.$element,
+ classes: [ 'mw-rcfilters-ui-capsuleItemWidget-popup' ]
}
}, config ) );
// Set initial text for the popup - the description
descLabelWidget.setLabel( this.model.getDescription() );
+ this.$highlight = $( '<div>' )
+ .addClass( 'mw-rcfilters-ui-capsuleItemWidget-highlight' );
+
// Events
this.model.connect( this, { update: 'onModelUpdate' } );
- this.closeButton.connect( this, { click: 'onCapsuleRemovedByUser' } );
+ this.closeButton.$element.on( 'mousedown', this.onCloseButtonMouseDown.bind( this ) );
// Initialization
this.$overlay.append( this.popup.$element );
this.$element
+ .prepend( this.$highlight )
.attr( 'aria-haspopup', 'true' )
.addClass( 'mw-rcfilters-ui-capsuleItemWidget' )
- .on( 'mouseover', this.onHover.bind( this, true ) )
- .on( 'mouseout', this.onHover.bind( this, false ) );
+ .on( 'mouseenter', this.onMouseEnter.bind( this ) )
+ .on( 'mouseleave', this.onMouseLeave.bind( this ) );
this.setCurrentMuteState();
+ this.setHighlightColor();
};
OO.inheritClass( mw.rcfilters.ui.CapsuleItemWidget, OO.ui.CapsuleItemWidget );
*/
mw.rcfilters.ui.CapsuleItemWidget.prototype.onModelUpdate = function () {
this.setCurrentMuteState();
+
+ this.setHighlightColor();
+ };
+
+ /**
+ * Override mousedown event to prevent its propagation to the parent,
+ * since the parent (the multiselect widget) focuses the popup when its
+ * mousedown event is fired.
+ *
+ * @param {jQuery.Event} e Event
+ */
+ mw.rcfilters.ui.CapsuleItemWidget.prototype.onCloseButtonMouseDown = function ( e ) {
+ e.stopPropagation();
+ };
+
+ /**
+ * Emit a click event when the capsule is clicked so we can aggregate this
+ * in the parent (the capsule)
+ */
+ mw.rcfilters.ui.CapsuleItemWidget.prototype.onClick = function () {
+ this.emit( 'click' );
+ };
+
+ /**
+ * Override the event listening to the item close button click
+ */
+ mw.rcfilters.ui.CapsuleItemWidget.prototype.onCloseClick = function () {
+ var element = this.getElementGroup();
+
+ if ( element && $.isFunction( element.removeItems ) ) {
+ element.removeItems( [ this ] );
+ }
+
+ // Respond to user removing the filter
+ this.controller.updateFilter( this.model.getName(), false );
+ this.controller.clearHighlightColor( this.model.getName() );
+ };
+
+ mw.rcfilters.ui.CapsuleItemWidget.prototype.setHighlightColor = function () {
+ var selectedColor = this.model.isHighlightEnabled() ? this.model.getHighlightColor() : null;
+
+ this.$highlight
+ .attr( 'data-color', selectedColor )
+ .toggleClass(
+ 'mw-rcfilters-ui-capsuleItemWidget-highlight-highlighted',
+ !!selectedColor
+ );
};
/**
this.$element
.toggleClass(
'mw-rcfilters-ui-capsuleItemWidget-muted',
+ !this.model.isSelected() ||
this.model.isIncluded() ||
this.model.isConflicted() ||
this.model.isFullyCovered()
};
/**
- * Respond to hover event on the capsule item.
- *
- * @param {boolean} isHovering Mouse is hovering on the item
+ * Respond to mouse enter event
*/
- mw.rcfilters.ui.CapsuleItemWidget.prototype.onHover = function ( isHovering ) {
+ mw.rcfilters.ui.CapsuleItemWidget.prototype.onMouseEnter = function () {
if ( this.model.getDescription() ) {
- this.popup.toggle( isHovering );
-
- if ( isHovering && !this.positioned ) {
+ if ( !this.positioned ) {
// Recalculate position to be center of the capsule item
this.popup.$element.css( 'margin-left', ( this.$element.width() / 2 ) );
this.positioned = true;
}
+
+ // Set timeout for the popup to show
+ this.popupTimeoutShow = setTimeout( function () {
+ this.popup.toggle( true );
+ }.bind( this ), 500 );
+
+ // Cancel the hide timeout
+ clearTimeout( this.popupTimeoutHide );
+ this.popupTimeoutHide = null;
}
};
/**
- * Respond to the user removing the capsule with the close button
+ * Respond to mouse leave event
*/
- mw.rcfilters.ui.CapsuleItemWidget.prototype.onCapsuleRemovedByUser = function () {
- this.controller.updateFilter( this.model.getName(), false );
+ mw.rcfilters.ui.CapsuleItemWidget.prototype.onMouseLeave = function () {
+ this.popupTimeoutHide = setTimeout( function () {
+ this.popup.toggle( false );
+ }.bind( this ), 250 );
+
+ // Clear the show timeout
+ clearTimeout( this.popupTimeoutShow );
+ this.popupTimeoutShow = null;
+ };
+
+ /**
+ * Remove and destroy external elements of this widget
+ */
+ mw.rcfilters.ui.CapsuleItemWidget.prototype.destroy = function () {
+ // Destroy the popup
+ this.popup.$element.detach();
+
+ // Disconnect events
+ this.model.disconnect( this );
+ this.closeButton.disconnect( this );
};
}( mediaWiki, jQuery ) );
dépôts / lhc / web / wiklou.git / blobdiff